<template>
  <div class="middle">
    <div class="office_text">
      <el-scrollbar>
        <ul class="friends_list cursor_pointer">
          <li class="selected_none">
            <p>新朋友</p>
            <div class="friends_box" @click="handleMessageStatus('new_friend')">
              <el-badge :value="newFriendUnreadNum" :hidden="!newFriendUnreadNum" :max="99">
                <div class="user_head"><img src="https://fengnull.gitee.io/picture_house/chat/new_friend.png" />
                </div>
              </el-badge>
              <div class="friends_text">
                <p class="user_name">新的朋友</p>
              </div>
            </div>
          </li>
          <li class="selected_none" v-if="groupList.length">
            <p>群聊</p>
            <div class="friends_box" v-for="item in groupList" :key="item.group_id" @click="chooseObject(item,'group')">
              <div class="user_head"><img :src="item.group_avatar" /></div>
              <div class="friends_text">
                <p class="user_name">{{ item.group_name }}
                </p>
              </div>
            </div>
          </li>
          <li class="selected_none" v-if="friendList.length">
            <p>好友</p>
            <div class="friends_box" v-for="item in friendList" :key="item.user_id"
              @click="chooseObject(item,'friend')">
              <div class="user_head"><img :src="item.avatar" :class="item.status?'':'friend_offline'" />
              </div>
              <div class="friends_text">
                <p class="user_name">{{ item.user_alias }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
import { useChatStore } from "../../../store/chat";
import { emitter } from "../../../utils/emitter";
export default defineComponent({
  name: "chat-contact",
  components: {},
  setup() {
    const chatStore = useChatStore();
    const friendList = computed(() => chatStore.friendList);
    const groupList = computed(() => chatStore.groupList);
    const newFriendUnreadNum = ref(0);
    const handleMessageStatus = (status) => {
      chatStore.panelStatusAction(status);
    };
    const chooseObject = (currentChat, currentChatType) => {
      chatStore.setCurrentChatAction({ currentChat, currentChatType });
      emitter.emit("changeNav", "message");
      chatStore.panelStatusAction("chat");
    };
    return {
      friendList,
      groupList,
      newFriendUnreadNum,
      handleMessageStatus,
      chooseObject,
    };
  },
});
</script>
<style lang="less" scoped>
@import "src/pages/wechat/wechat.less";
.windows_top {
  padding-top: 10px;
  height: 62px;
  border-bottom: 1px solid #e7e7e7;

  .windows_top_box {
    width: 100%;
    height: 100%;
    position: relative;

    & > span {
      font-size: 18px;
      color: #333;
      line-height: 52px;
      padding-left: 30px;
      display: inline-block;
    }
  }
}
.middle {
  width: 100%;
  height: calc(100% - 60px);
  float: left;
  background: #fff;
  overflow: hidden;
  display: block;
  .office_text {
    width: 100%;
    height: calc(100% - 62px);
    position: relative;
    display: inline-block;
  }

  .user_list,
  .friends_list {
    width: 100%;

    .user_head_badge {
      height: 40px;
      width: 40px;
      border-radius: 2px;
      float: left;
    }

    .user_head {
      background: #999;
      height: 40px;
      width: 40px;
      border-radius: 2px;
      float: left;

      img {
        width: 40px;
      }
    }

    .user_name {
      color: #000;
      font-size: 14px;
    }
  }

  .user_list {
    li {
      width: 100%;
      height: 64px;
      padding: 12px;

      &:hover {
        background: #dedbdb;
      }

      .user_text {
        float: left;
        height: 40px;
        width: 122px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 10px;

        p {
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .user_message {
          color: #999;
          font-size: 12px;
        }
      }

      .user_time {
        float: right;
        color: #999;
        font-size: 12px;
      }
    }

    .user_active {
      background: #dedbdb;
    }
  }

  .friends_list {
    li {
      width: 100%;
      padding-top: 12px;
      border-bottom: 1px solid #eee;
      & > p {
        font-size: 12px;
        color: #999;
        line-height: 26px;
        padding-left: 12px;
      }

      .friends_box {
        padding: 12px 0 12px 12px;
        width: 100%;
        display: flex;

        &:hover {
          background: #dedbdb;
        }
      }

      .friends_text {
        float: left;
        line-height: 40px;
        width: 180px;
        padding-left: 10px;

        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.on {
  display: block;
}

.friend_offline {
  filter: grayscale(100%);
}
</style>